<template>
  <div class="home">
    <nav-bar></nav-bar>
    <div class="content">
      <side-bar></side-bar>
      <movie-list></movie-list>
    </div>
  </div>
</template>
<script>
import navBar from '../layout/navBar'
import sideBar from '../layout/sideBar'
import movieList from './movieList'

import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      movieList: []
    }
  },
  computed: {
    ...mapGetters([
      'movies'
    ])
  },
  watch: {
    movies (val) {
      this.movieList = val
    }
  },
  mounted () {
    this.queryMovies().then(_ => {
      this.movieList = this.movies
    })
  },
  components: {
    navBar,
    sideBar,
    movieList
  },
  methods: {
    ...mapActions([
      'queryMovies'
    ])
  }
}
</script>
<style lang="scss" scoped>
  .home{
    background: #f4f7f6;
    height: calc(100% - 32px);
    text-align: center;
    box-sizing: border-box;
    .content{
      height: calc(100% - 83px);
      display: flex;
      flex: 1;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        position: absolute;
        z-index: 100;
        width: 0px;
        margin-left: -10px;
        -webkit-appearance: none;
      }
      &::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: #E6EAEA;
        background-clip: content-box;
        border-color: transparent;
        border-style: solid;
        border-width: 1px 2px;
        border-radius: 5px;
      }
      >div:first-child{
        flex: 0 0 256px;
      }
      >div:last-child{
        flex: 1 0 0;
      }
    }
  }
</style>
